<template>
	<view class="app">
		<view class="base_info" :style="'padding-top:' + statusBarHeight + 'px'">
			<view class="top">
				<!-- #ifdef MP -->
				<view class="bell">
					<u-icon
						name="bell"
						size="48"
						@tap="vk.navigateTo('/pages/notice/list')"
					></u-icon>
					<u-badge type="error" is-dot size="mini" :offset="[0, 0]" v-if="read"></u-badge>
				</view>
				<view class="title">我的</view>
				<view style="width: 54rpx"></view>
				<!-- #endif -->
				<!-- #ifndef MP -->
				<view style="width: 54rpx"></view>
				<view class="title">我的</view>
				<view class="bell">
					<u-icon
						name="bell"
						size="48"
						@tap="vk.navigateTo('/pages/notice/list')"
					></u-icon>
					<u-badge type="error" is-dot size="mini" :offset="[0, 0]" v-if="read"></u-badge>
				</view>
				<!-- #endif -->
			</view>
			<view class="middle">
				<u-avatar size="108" :src="userInfo.avatar || src"></u-avatar>
				<view class="info">
					<block v-if="isLogin">
						<text class="text">{{ userInfo.nickname }}</text>
						<text>{{ userInfo.mobile }}</text>
					</block>
					<text v-else @tap="login">点击登录</text>
				</view>
				<view
					class="update_btn"
					v-if="isLogin"
					@tap="vk.navigateTo('/pages/user/setting/info')"
				>
					<u-icon name="edit-pen" size="26"></u-icon>
					编辑资料
				</view>
			</view>
			<view class="end">
				<view class="item line" @tap="vk.navigateTo('/pages/user/wallet/list')">
					<text class="text">
						{{ vk.pubfn.priceFilter(userInfo.blance) || "--" }}
					</text>
					<text>钱包</text>
				</view>
				<view class="item line" @tap="vk.navigateTo('/pages/user/coupon/list')">
					<text class="text">{{ userInfo.coupon || "0" }}</text>
					<text>优惠券</text>
				</view>
				<view class="item" @tap="vk.navigateTo('/pages/user/collect/collect')">
					<text class="text">{{ userInfo.collect || "0" }}</text>
					<text>收藏</text>
				</view>
			</view>
		</view>
		<view class="other_link">
			<image
				src="https://mp-d0bdc000-db91-44a8-852b-e6f607a7ca19.cdn.bspapp.com/cloudstorage/3af9c214-61ae-400f-ab9a-e47152d3771f.png"
				style="flex: 1; height: 168rpx; margin-right: 10rpx"
				@tap="vk.navigateTo('/pages/salesman/index')"
			></image>
			<image
				src="https://mp-d0bdc000-db91-44a8-852b-e6f607a7ca19.cdn.bspapp.com/cloudstorage/c470c835-d711-41a4-bea8-92bdce91f4dc.png"
				style="flex: 1; height: 168rpx; margin-left: 10rpx"
				@tap="vk.navigateTo('/pages/user/move-reid/shifu')"
			></image>
		</view>
		<view class="jump_list">
			<view class="item" v-for="item in jumpList" :key="item.icon" @tap="jumpTo(item)">
				<u-image width="60" height="60" :src="item.icon"></u-image>
				<text class="text">{{ item.name }}</text>
				<u-icon size="30" name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="btn" v-if="isLogin" @tap="show = true">退出登录</view>
		<u-modal
			content="确认退出登录么？"
			show-cancel-button
			v-model="show"
			@confirm="logout"
		></u-modal>
	</view>
</template>

<script>
let systemInfo = uni.getSystemInfoSync()
var vk = uni.vk

export default {
	data() {
		return {
			// 状态栏高度
			statusBarHeight: systemInfo.statusBarHeight,
			// 用户信息
			src: require("@/static/mine/icon_tx.png"),
			userInfo: {
				coupon: 0,
				blance: 0,
				avatar: "",
				nickname: "",
				mobile: ""
			},
			// 跳转列表
			jumpList: [
				{
					name: "常用地址",
					icon: require("@/static/mine/icon_my_list_location.png"),
					url: "/pages/user/address/list"
				},
				{
					name: "关于我们",
					icon: require("@/static/mine/icon_my_list_about.png"),
					url: "/pages/login/agreement?type=GYWM"
				},
				{
					name: "意见反馈",
					icon: require("@/static/mine/icon_my_list_suggest.png"),
					url: "/pages/user/setting/feedback"
				},
				{
					name: "设置",
					icon: require("@/static/mine/icon_my_list_set.png"),
					url: "/pages/user/setting/account-security"
				}
			],

			show: false,
			isLogin: false,
			read: true
		}
	},
	onLoad() {
		uni.$on("clearInfo", () => {
			this.clear()
		})
	},
	onShow() {
		this.isLogin = vk.checkToken()
		if (this.isLogin) {
			this.getUserInfo()
		}
	},
	methods: {
		// 获取用户信息
		async getUserInfo() {
			const res = await vk.callFunction({
				url: "client/user.getUserCenter",
				loading: true
			})
			if (res.code !== 0 || res.flag) {
				return this.clear()
			}
			this.userInfo = {
				avatar: res.userInfo.avatar,
				coupon: res.couponNum,
				nickname: res.userInfo.nickname,
				mobile: res.userInfo.mobile,
				blance: res.userInfo.account_balance.balance,
				collect: res.collectNum
			}
			let arr = vk.getStorageSync("read") || []
			this.read = res.read.length > arr.length
		},
		// 点击登录
		login() {
			let { login } = vk.getConfig()
			vk.navigateTo(`${login.url}`)
		},
		// 退出登录
		logout() {
			vk.userCenter.logout({
				success: () => {
					let { login } = vk.getConfig()
					vk.navigateTo(`${login.url}?change=true`)
					this.clear()
				}
			})
		},
		clear() {
			this.userInfo = {
				coupon: 0,
				blance: 0,
				avatar: "",
				nickname: "",
				mobile: ""
			}
			this.isLogin = false
		},
		// 跳转
		jumpTo(item) {
			vk.navigateTo(item.url)
		}
	}
}
</script>

<style lang="scss" scoped>
.app {
	min-height: 100vh;
	/* #ifdef H5 */
	min-height: calc(100vh - 50px);
	/* #endif */
	background-color: #f5f5f5;
	padding-bottom: 40rpx;
}

.base_info {
	width: 100%;
	min-height: 460rpx;
	background: url("https://mp-d0bdc000-db91-44a8-852b-e6f607a7ca19.cdn.bspapp.com/cloudstorage/271b99ef-01cb-43c2-9aed-7f3f25161834.png")
		no-repeat;
	background-size: 100% 88%;
	.top {
		font-weight: 700;
		font-size: 32rpx;
		text-align: center;
		color: #ffffff;
		padding: 10rpx 20rpx;
		position: relative;
		display: flex;
		align-items: center;
		.title {
			flex: 1;
		}
		.bell {
			position: relative;
		}
	}
	.middle {
		padding: 46rpx 0 36rpx 30rpx;
		display: flex;
		align-items: center;
		.info {
			display: flex;
			flex-direction: column;
			font-size: 26rpx;
			color: #fbfbfb;
			padding-left: 24rpx;
			flex: 1;
			.text {
				font-size: 34rpx;
				margin-bottom: 6rpx;
			}
		}
		.update_btn {
			font-size: 26rpx;
			display: flex;
			align-items: baseline;
			padding: 10rpx 16rpx 10rpx 24rpx;
			background-color: #fff;
			border-radius: 32rpx 0 0 32rpx;
			.u-icon {
				margin-right: 8rpx;
			}
		}
	}
	.end {
		margin: 4rpx 20rpx;
		background: #ffffff;
		box-shadow: 0 3rpx 26rpx 1rpx rgba(0, 0, 0, 0.02);
		border-radius: 12rpx;
		padding: 31rpx 0;
		display: flex;
		justify-content: space-around;
		.item {
			flex: 1;
			text-align: center;
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 24rpx;
			position: relative;
			.text {
				margin-bottom: 10rpx;
				font-size: 36rpx;
				font-weight: bold;
			}
		}
		.line::after {
			content: "";
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 1rpx;
			height: 60rpx;
			background-color: #d1d1d1;
		}
	}
}

.other_link {
	display: flex;
	justify-content: space-between;
	padding: 20rpx;
	.u-image {
		box-shadow: 0 3rpx 26rpx 1rpx rgba(0, 0, 0, 0.02);
	}
}

.jump_list {
	background: #ffffff;
	border-radius: 12rpx;
	padding: 22rpx;
	margin: 0 20rpx;
	.item {
		font-size: 32rpx;
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		.text {
			flex: 1;
			padding-left: 16rpx;
			transform: translateY(-2rpx);
		}
	}
}

.btn {
	height: 88rpx;
	background: #3ab54a;
	border-radius: 12rpx;
	color: #ffffff;
	font-size: 30rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 80rpx 20rpx 0;
}
</style>
